<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script language="javascript" type="text/javascript">
    var flag = true;
    function show_select(input,btn,option,value){
      var inputobj=document.getElementById(input);
      var btnobj=document.getElementById(btn);
      var optionobj=document.getElementById(option);
      var valueobj=document.getElementById(value);
      function chk() {
        if (flag) {
          document.getElementById(option).style.display = 'none';
        }
      }
      // 50flag
      optionobj.onmouseout = function() {
        setTimeout(chk, 50);
      }
      optionobj.style.display=optionobj.style.display==""?"none":"";
      for (var j=0;j<optionobj.childNodes.length;j++){
        // optionobj.focus();
        optionobj.childNodes[j].onmouseover=function (){
          this.className="qty_items_over";
          // flag
          flag = false;
        };
        optionobj.childNodes[j].onmouseout=function (){
          this.className="qty_items_out";
          // flag
          flag = true;

        };
        optionobj.childNodes[j].onclick=function () {
          inputobj.innerHTML=this.innerHTML;
          valueobj.value=this.innerHTML;
          optionobj.style.display="none";
          a = this.getElementsByTagName('a')[0];
          h = a.href;
          window.location.href =h;
        };
      }
    };
  </script>
  <style type="text/css">
    body{
      font-size:12px;
      font:12px Arial, Helvetica, sans-serif;
    }
    .pro_select{
      width:174px;
      height:22px;
      float:left;
      margin:0 10px;
    }
    #pro_qty,#a1,#a2,#a3{
      float:left;
      height:22px;
      width:148px;
      padding-left:4px;
      line-height:24px;
      background:url(index_134.gif) no-repeat;
    }
    #pro_qty_but,#b1,#b2,#b3{
      float:left;
      width:22px;
      cursor:pointer;
    }
    #qty_items,#c1,#c2,#c3{
      clear:left;
      width:150px;
      border-right:1px solid #959595;
      border-bottom:1px solid #959595;
      border-left:1px solid #959595;
      position:absolute;
      z-index:80;
    }
    .qty_items_out {
      background-color:#FFFFFF;
      padding-left:2px;
      cursor:pointer;
      line-height:18PX;
      z-index:1;
    }
    .qty_items_over{
      background-color:#CCCCCC;
      padding-left:2px;
      cursor:pointer;
      line-height:18PX;
    }
    .clear{
      clear:left;}
    a{text-decoration:none;
      color: #000;}
  </style>
  <title>Js模拟下拉跳转菜单</title>
</head>
<body >
<div style="width:866px;height:28px;margin:0 auto;padding:7px 0 0 120px;">
  <div class="pro_select ">
    <div id="pro_qty">请选择类别</div>
    <div class="id" onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')">
      <img src="index_134_02.gif" style="cursor:pointer;margin-left:-22px;" />
    </div>
    <div class="clear"></div>
    <div id="qty_items" style="display:none">
      <div class='qty_items_out'><a href="http://www.sina.com">sina</a></div>
      <div class='qty_items_out'><a href="http://www.codefans.net">codefans</a></div>
      <div class='qty_items_out'><a href="http://www.sohu.com">sohu</a></div>
      <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div>
    </div>
  </div>
  <div class="pro_select">
    <div id="a1">请选择类别</div>
    <div id="b1" onclick="show_select('a1','b1','c1','d1')">
      <img src="index_134_02.gif" style="cursor:pointer;margin-left:-22px;" />
    </div>
    <div class="clear"></div>
    <div id="c1" style="display:none">
      <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div>
      <div class='qty_items_out'><a href="http://www.sina.com">sina</a></div>
      <div class='qty_items_out'><a href="http://www.codefans.net">codefans</a></div>
    </div>
  </div>
  <div class="pro_select">
    <div id="a2">请选择类别</div>
    <div id="b2" onclick="show_select('a2','b2','c2','d2')">
      <img src="index_134_02.gif" style="cursor:pointer;margin-left:-22px;" />
    </div>
    <div class="clear"></div>
    <div id="c2" style="display:none">
      <div class='qty_items_out'><a href="http://www.sohu.com">sohu</a></div>
      <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div>
    </div>
  </div>
  <div class="pro_select">
    <div id="a3">请选择类别</div>
    <div id="b3" onclick="show_select('a3','b3','c3','d3')">
      <img src="index_134_02.gif" style="cursor:pointer;margin-left:-22px;" />
    </div>
    <div class="clear"></div>
    <div id="c3" style="display:none">
      <div class='qty_items_out'><a href="http://www.tianya.com">tianya</a></div>
      <div class='qty_items_out'><a href="http://www.sohu.com">sohu</a></div>
      <div class='qty_items_out'><a href="http://www.baidu.com">baidu</a></div>
    </div>
  </div>
  <form id="form1" name="form1" method="post" action="">
    <input name="qty" type="hidden" id="qty" value="1" />
    <input name="qty" type="hidden" id="d1" value="1" />
    <input name="qty" type="hidden" id="d2" value="1" />
    <input name="qty" type="hidden" id="d3" value="1" />
  </form>
</div>
</body>
</html>